Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Решение "Наборы товаров" позволят сформировать из блока "С этим товаром покупают" набор с возможностью редактирования содержимого набора, а также добавления его в корзину одним нажатием кнопки. При этом выводится информация об общей стоимости набора и количестве позиций в наборе.

Требования к установке:
• активированный модуль "Интернет-магазин";
• настроенный блок "С этим товаром покупают";

Первый шаг: загрузка файлов на сайт

Перейдите в Панель управления » Файловый менеджер. В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js. Кликните на галочку и ура, мы создали папку с нужным именем!:) Теперь абсолютно идентичным действиям создайте папку, но только с названием css и img.

Теперь зайдите в папку js и загрузите в эту папку файлы "jquery.movingboxes.js" и "um-sets.js" из архива со скриптом (папка "скрипты").
Далее, перейдите в папку css и загрузите в неё файлы "jquery.movingboxes.css" и "um-sets.css" из архива со скриптом (папка "стили").
Далее, перейдите в папку img и загрузите в неё все файлы, которые находятся в архиве со скриптом (папка "изображения").

Второй шаг: установка кода

Перейдите в раздел Панель управления » Дизайн » Управление дизайном (шаблоны) » Вид товара в каталоге и добавьте следующий код в самом начале шаблона:

<?if $BLOCK_PREF$ = 'recommended_products'?>
<div class="set-checkbox checked" data-set-price="$PRICE_RAW$" data-set-id="$ID$"></div>
<?endif?>							

Перейдите в раздел Панель управления » Дизайн » Управление дизайном (шаблоны) » Страница товара и добавьте после <?$RECOMMENDED_PRODUCTS$()?> следующий код:

<link rel="stylesheet" href="/css/movingboxes.css">
<link rel="stylesheet" href="/css/um-sets.css">
<script src="/js/jquery.movingboxes.js"></script>
<script src="/js/um-sets.js"></script>		
<script>
	$(function(){
		$('#recommended_products').append('<div id="um-set"></div>');
		$('#um-set').append('<div class="list-item"><strong>$ENTRY_TITLE$</strong><br><img src="$THUMB$" alt="$ENTRY_TITLE$"><br>$OPTIONS$<br><b class="shop-itempage-price"><?if($PRICE_OLD$)?><s>$PRICE_OLD$</s> <span class="newprice">$PRICE$</span><?else?>$PRICE$<?endif?></b></div>'); 

		$('#recommended_products .goods-list .list-item').each(function(i){
			$('#um-set').append('<div class="list-item" id="' + $(this).attr('id') + '">' + $(this).html() + '</div>');
		});

		$('#recommended_products .goods-list').remove();

		$('#um-set').movingBoxes({
			hashTags: false,
			startPanel : 1, // start with this panel
			wrap : false, // if true, the panel will infinitely loop
			buildNav : true, // if true, navigation links will be added
			navFormatter : function(){ return "●"; }, // function which returns the navigation text for each panel
			initialized: function(e, slider, tar){

				$('#um-set').parent().before('<div class="set-summary"></div>');
				var mySet = new um.USet($ID$, $PRICE_RAW$);
				mySet.getItems();
				mySet.showSet();

				$('#recommended_products .mb-inside').on('click', '.set-checkbox', function(){
					$(this).toggleClass('checked');
					if($(this).hasClass('checked')) {
						mySet.addItem($(this).data().setId, $(this).data().setPrice);
					} else {
						mySet.removeItem($(this).data().setId, $(this).data().setPrice);
					}
					mySet.showSet();
				});

				$('#recommended_products .set-summary').on('click', '.add-set', function(){
					$(this).addClass('wait');
					mySet.addSet('', function(){$(this).removeClass('wait').addClass('done');});
				});
			}
		});
	});    
</script>

Третий шаг: установка стилей

Внешний вид товаров устанавливается в файле "um-sets.css". Набор на странице оборачивается в контейнер с идентификатором um-set.

Информация о классах:

• #recommended_products – весь блок;
• #recommended_products #recommended_products_title – заголовок блока;
• #recommended_products .set-summary – блок с информацией о наборе;
• #recommended_products .set-summary .add-set – кнопка добавления набора в корзину;
• #recommended_products .set-summary .wait – стиль кнопки в процессе доабвления набора в корзину;
• #um-set – карусель с товарами;
• #um-set .mb-inside – блок с карточкой товара из набора;
• #um-set .list-item – используется для задания ширины карточки товара;
• #um-set .list-item .mb-inside:after – значки "+" между карточками товара в наборе;
• #um-set .list-item .set-checkbox – чекбокс включения/исключения товара набора;
• #um-set .list-item .set-checkbox.checked – чекбокс выбранного товара;

Четвёртый шаг: настройка и использование

Откройте файл "um-sets.js" и установите в нем желаемые настройки:

Информация о настройках:

• this.message – текст сообщения, который отображается в блоке с информацией о наборе;
• this.priceClass – класс, в который оборачивается цена;
• this.a2bText – надпись на кнопке добавления набора в корзину;
• this.a2bClass – дополнительный класс для кнопки добавления набора в корзину;
• this.currName – сокращенное название валюты. По умолчанию используются данные из информера $CURRENCY$. При отсутствии этого информера на странице укажите в настройке 'RUR', 'USD' или любое другое наименование валюты в ковычках;
• this.rate – курс валюты к условной единице магазина. По умолчанию используются данные из информера $CURRENCY$. При отсутствии этого информера на странице укажите число.